<template>
  <div style="padding: 20px" v-loading="fullLoading">
    <div class="flex flex-no-wrap justify-start align-center">
      <el-form ref="searchForm" :model="searchForm" :inline="true" size="mini">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="searchForm.name" placeholder="请输入项目名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="合同时间" prop="contractBeginDate">
              <el-date-picker
                v-model="searchForm.contractBeginDate"
                type="date"
                placeholder="开始时间"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="至" prop="contractEndDate">
              <el-date-picker
                v-model="searchForm.contractEndDate"
                type="date"
                placeholder="结束时间"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="执行状态" prop="executionStatus">
              <el-select v-model="searchForm.executionStatus" clearable style="width: 200px">
                <el-option v-for="item in executionStatusArr" :value="item.id" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" plain @click="search">搜索</el-button>
              <el-button type="info" plain @click="resetForm(false)">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <CustomerList :tableData="tableData"
                  :customerShowTip="customerShowTip"
                  :customerShowMoney="customerShowMoney"
                  :contractShowTip="contractShowTip"
                  :contractShowMoney="contractShowMoney"
                  :saleOrderShowExpand="saleOrderShowExpand"
                  :saleOrderShowTip="saleOrderShowTip"
                  :saleOrderShowMoney="saleOrderShowMoney"
                  :marketOrderShowExpand="marketOrderShowExpand"
                  :marketOrderShowTip="marketOrderShowTip"
                  :adMakeOrderShowExpand="adMakeOrderShowExpand"
                  :adMakeOrderShowTip="adMakeOrderShowTip"
                  :workOrderShowExpand="workOrderShowExpand"
                  @openCustomerDialog="openCustomerDialog"
                  @openContractDialog="openContractDialog"
                  @openSaleOrderDialog="openSaleOrderDialog"
                  @openMarketOrderDialog="openMarketOrderDialog"
                  @openADMakeOrderDialog="openADMakeOrderDialog"
                  @openInvoiceDialog="openInvoiceDialog"
                  @openReceivedDialog="openReceivedDialog"
    />
    <el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="searchForm.page" :page-sizes="[10, 20, 30]"
                   :page-size.sync="searchForm.page_size" layout="total, sizes, prev, pager, next, jumper"
                   :total="total"
                   style="margin-top: 10px"
    >
    </el-pagination>

    <CustomerDialog ref="BFCustomerDialog" :customerId="customerId"/>
    <ContractDialog ref="BFContractDialog" :contract_id="contractId"/>
    <SaleOrderDialog ref="BFSaleOrderDialog" :saleOrderId="saleOrderId"/>
    <MarketOrderDialog ref="BFMarketOrderDialog" :marketOrderId="marketOrderId"/>
    <AdMakeOrderDialog ref="BFAdMakeOrderDialog" :adMarketOrderId="adMakeOrderId"/>
    <invoice-dialog :id="invoice_id" ref="invoiceDialog"></invoice-dialog>
    <received-dialog ref="receivedDialog" :ids="received_ids"></received-dialog>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import { customer_list } from '@/api/businessFlow/index.js'
import CustomerList from './components/CustomerList'
import CustomerDialog from '@/views/business/customer/components/CustomerDialog'
import ContractDialog from '@/views/business/contract/components/ContractDialog'
import SaleOrderDialog from '@/views/business/sale_order/components/SaleOrderDialog'
import MarketOrderDialog from '@/views/business/market_order/components/MarketOrderDialog'
import AdMakeOrderDialog from '@/views/business/ad_make_order/components/AdMakeOrderDialog'
import ReceivedDialog from '@/views/finance/account/components/receivedDialog.vue'
import InvoiceDialog from '@/views/finance/invoice/components/invoiceDialog.vue'

export default {
  name: 'BSCustomerList',
  components: {
    InvoiceDialog,
    ReceivedDialog,
    CustomerList,
    SearchFormBox,
    CustomerDialog,
    ContractDialog,
    SaleOrderDialog,
    MarketOrderDialog,
    AdMakeOrderDialog
  },
  // beforeRouteLeave(to, from, next) {
  //   this.$destroy()
  //   next()
  // },
  beforeDestroy() {
  },
  data() {
    return {
      customerId: null,
      contractId: null,
      saleOrderId: null,
      marketOrderId: null,
      adMakeOrderId: null,
      invoice_id: -1,
      received_ids: [-1],
      fullLoading: false,
      listParams: {
        page: 1,
        page_size: 10,
        isCurrentUserMaintain: false
      },
      total: 0,
      current: 1, // 当前页
      tableData: [],

      searchForm: {
        name: null,
        contractBeginDate: null,
        contractEndDate: null,
        executionStatus: null
      },

      customerShowTip: false,
      contractShowTip: false,
      saleOrderShowExpand: false,
      saleOrderShowTip: false,
      marketOrderShowExpand: false,
      marketOrderShowTip: false,
      adMakeOrderShowExpand: false,
      adMakeOrderShowTip: false,
      workOrderShowExpand: false,

      customerShowMoney: false,
      contractShowMoney: false,
      saleOrderShowMoney: false,

      executionStatusArr: [
        {id: 1, name: '已执行完'},
        {id: 0, name: '未执行完'},
      ]
    }
  },
  mounted() {
    this.checkRights()
    this.getList()
  },
  methods: {
    openCustomerDialog(id) {
      this.customerId = id
      this.$refs.BFCustomerDialog.open()
    },
    openContractDialog(id) {
      this.contractId = id
      this.$refs.BFContractDialog.open()
    },
    openSaleOrderDialog(id) {
      this.saleOrderId = id
      this.$refs.BFSaleOrderDialog.open()
    },
    openMarketOrderDialog(id) {
      this.marketOrderId = id
      this.$refs.BFMarketOrderDialog.open()
    },
    openADMakeOrderDialog(id) {
      this.adMakeOrderId = id
      this.$refs.BFAdMakeOrderDialog.open()
    },

    async checkRights() {
      const that = this
      await that.$store.dispatch('permission/checkRights', {
        names: [
          'bf_view_customer_dialog',
          'bf_view_contract_dialog',
          'bf_view_sale_order_abstract',
          'bf_view_sale_order_dialog',
          'bf_view_market_order_abstract',
          'bf_view_market_order_dialog',
          'bf_view_ad_make_order_abstract',
          'bf_view_ad_make_order_dialog',
          'bf_view_work_order_abstract',
          'bf_view_customer_money',
          'bf_view_contract_money',
          'bf_view_sale_order_money'
        ],
        rights: that.$store.getters.btnRights
      }).then((results) => {
        console.log(results)
        this.customerShowTip = results[0]
        this.contractShowTip = results[1]
        this.saleOrderShowExpand = results[2]
        this.saleOrderShowTip = results[3]
        this.marketOrderShowExpand = results[4]
        this.marketOrderShowTip = results[5]
        this.adMakeOrderShowExpand = results[6]
        this.adMakeOrderShowTip = results[7]
        this.workOrderShowExpand = results[8]
        this.customerShowMoney = results[9]
        this.contractShowMoney = results[10]
        this.saleOrderShowMoney = results[11]
      })
    },

    search() {
      this.listParams = Object.assign({}, this.listParams, this.searchForm)
      this.getList()
    },
    resetForm(flag = false) {
      this.$refs['searchForm'].resetFields()
      if (!flag) {
        this.search()
      }
    },
    getList() {
      this.fullLoading = true
      customer_list(this.listParams).then(res => {
        this.fullLoading = false
        this.total = res.data.total
        this.tableData = res.data.records
      }).catch(() => {
        this.fullLoading = false
      })
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    openInvoiceDialog(id) {
      this.invoice_id = id
      this.$nextTick(() => {
        this.$refs.invoiceDialog.open()
      })
    },
    openReceivedDialog(ids) {
      this.received_ids = ids
      this.$nextTick(() => {
        this.$refs.receivedDialog.open()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
